<template>
	<view class="page-header">
		<view class="logo" @click="navigateIndex">
			<image :src="logo"></image>
		</view>
		<view class="vseparator" v-if="mainTitle||subTitle"></view>
		<view class="logo-desc">
			<view>{{mainTitle}}</view>
			<view>{{subTitle}}</view>
		</view>
		<a class="contact" :href="telphone">
			<image src="@/static/img/ico-phone.png"></image>
			<view class="contact-txt">咨询合作</view>
		</a>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	export default {
		name:"pageHeader",
		data() {
			return {
				phone:'',
				telphone:'',
				mainTitle:'国家工信部推荐单位',
				subTitle:'胡润元宇宙潜力企业榜未来之星企业',
				logo:'/static/img/logo.png',
				info:{}
			};
		},
		mounted(){

		},
		mounted(){
			console.log('header')
			setTimeout(()=>{
				this.getInfo()	
			}, 500);
		},
		methods:{
			setTelphone() {
				if(this.phone){
						this.telphone = 'tel:'+this.phone;
				}
				console.log('telphone:'+this.telphone);
			},
			getInfo(){
				 const that = this;
				 this.info = uni.getStorageSync('setting');
				 if(this.info) {
					 this.setCache();
					 return ;
				 }
				 console.log('header info', this.info);
				 let uuid = "";
				 if(this.$route.query.uuid) {
				 	uuid = this.$route.query.uuid;
				 	uni.setStorageSync('uuid', uuid)
				 }
				 else {
				 	uuid = uni.getStorageSync('uuid');
				 }
				 api.getRequest('index', {
				 	uuid:uuid
				 }).then((res)=>{
					 let response = res.data;
					 console.log('set setting')
					 uni.setStorageSync('setting', response.setting)
					 that.info = response.setting;
					 that.setCache();
				 });
			},
			setCache(){
				
				
				if(this.info.logo) {
					 this.logo = this.info.logo;
				}
				if(this.info.phone_zx) {
					 this.phone = this.info.phone_zx;
					 this.setTelphone();
				}
				this.mainTitle = this.info.mainTitle;
				this.subTitle = this.info.subTitle;
				console.log(this.info);
			},
			navigateIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped>
	.page-header{
		position: relative;
		display: flex;
		align-items: center;
		height: 72rpx;
		background-color: rgba(0,0,0,.122);
		color: #fff;
	}
	
	.logo{
		margin-left: 42rpx;
		margin-right: 8rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.logo image{
		height: 30rpx;
		width: 85rpx;
		margin: 0 8rpx;
	}
	
	.vseparator{
		height: 32rpx;
		width: 1rpx;
		background-color: #7c6d84;
	}
	 
	.logo-desc{
		font-size: 16rpx;
		margin-left: 8rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.contact{
		position: absolute;
		right: 35rpx;
		width: 142rpx;
		height: 36rpx;
		top:20rpx;
		background-image: -webkit-linear-gradient( -72deg, rgb(200,32,144) 0%, rgb(106,20,209) 100%);
		border-radius: 3rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: rgb(223, 24, 253);
		/* opacity: 0.32; */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0;
		text-decoration: none;
	}
	
	.contact image{
		width: 20rpx;
		height: 20rpx;
	}
	 
	.contact .contact-txt{
		font-size: 24rpx;
		color: #fff;
		margin-left: 5rpx;
	}


</style>  

 

 